<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style>
			.style1 {
				color: black;
			}
			
			.style2 {
				color: white;
				background-color: red;
			}
		</style>
		<script>
			function check() {
				var content = "hello,welcome to study center!";
				var keytext = document.getElementById("keytext").value;
				if(keytext.length < content.length) {
					for(var i = 0; i < keytext.length; i++) {
						var c = content.charAt(i);
						if(keytext.charAt(i) != c) {
							document.getElementById("myspan" + i).className = 'style2';
						}
					}
				}else{
					document.getElementById("keytext").readOnly = true;
					var fcount = document.getElementsByClassName("style2").length;
					document.getElementById("result").innerHTML = "错误次数："+ fcount;
				}
			}

			function init() {
				var str = "hello,welcome to study center!";
				var htmlstr = "";
				for(var i = 0; i < str.length; i++) {
					htmlstr = htmlstr + "<span class='style1' id='myspan" + i + "'>" + str.charAt(i) + "</span>"
				}
				document.getElementById("content").innerHTML = htmlstr;
			}
		</script>
	</head>

	<body onload="init()">
		<p>打字练习：<span id="content"></span><br /></p>
		<p>键入内容：<input type="text" size="40" onkeyup="check()" id="keytext" /></p>
		<p id="result"></p>
	</body>

</html>